<template>
	<!-- cu-bar tabbar bg-white -->
	<view class="tabbar-foot">
		<view 
			class="action"
			v-for="(item, index) in list"
			:key="index"
			@tap="switchTab(item)"
		>
			<u-icon :name="count === index ? item.current : item.icon" :color="count === index ? '#fff' : '#ccc'" size="28"></u-icon>
		  <text :style="count === index ? 'color:#fff' : 'color:#ccc'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>

import { countChat } from '@/api/index.js'
export default {
	props: {
		count: null
	},
	data() {
	    return {
				count:this.count,
				list: [
					{
						id:1,
						name: '首页',
						pagePath: "/resume/index",
						icon: 'home',
						current: 'home-fill'
					},
					{
					id:2,
						name: '找工作',
						pagePath: "/resume/position",
						icon: 'grid',
						current: 'grid-fill'
					},
					{
					id:4,
						name: '我的',
						pagePath: "/resume/details",
						icon: 'account',
						current: 'account-fill'
					}
				]
	    }
	  },
	  mounted() {
			this.countChat()
		},
	  methods: {
	    switchTab(item) {
	      this.active = item.pagePath;
				// 这里使用reLaunch关闭所有的页面，打开新的栏目页面
				uni.reLaunch({
						url: this.active
				});
			},
			
			
			countChat() {
				countChat().then(res => {
					if(res.code){
						this.count = res.data
					}
				});
			},
			
	  }
	}
</script>
<style lang="scss">
	.tabbar-foot{
		background: #3c9cff;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		position: fixed;
		height: 100rpx;
		padding: 10rpx 0;
		align-items: center;
		width: 100%;
		border-top: 1px solid #999;
		color: #fff;
		.action{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 30%;
			text{
				display: block;
				width: 100%;
				margin: auto;
				text-align: center;
			}
		}
	}
	.u-page {
		padding: 0;
		.u-tabbar__content__item-wrapper{
			background-color: #045269;
		}
		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}

			&__slot-icon {
				width: 17px;
				height: 17px;
			}
		}
	}
</style>
